<template>
	<view class="user-detail">
		<view class="title">用户信息</view>
		<view class="card-box">
			<image class="user-img" src="@/static/main-icon/user.png" mode=""></image>
			<view style="flex: 1;">
				<view>
					<view class="card-title">{{userDetail.nickname}}(<text v-if="userDetail.userType === 0">普通</text>
						<text v-if="userDetail.userType === 1">VIP</text>)
					</view>
				</view>
				<view class="card-text flex-box">
					<view class="ml-box">角色：{{userDetail.userType===0?'普通用户':'VIP'}}</view>
					<view class="ml-box">余额：¥ {{userDetail.balance}}</view>
					<view class="ml-box">积分：{{userDetail.score}}</view>
				</view>
				<view @click="callNumber(userDetail)" class="card-text">电话：<uni-icons class="phone-icon" type="phone"
						color="#ff9600" size="16"></uni-icons>{{userDetail.mobile || '- -'}} </view>
				<view class="card-text">
					<view>预定次数：{{userDetail.orderCount}}</view>
				</view>
			</view>
		</view>
		<view class="tab-nav-box">
			<view class="tab-nav-title" :class="tabAct === 0 ?'tab-act':''" @click="changeTab(0)">时长卡</view>
			<view class="tab-nav-title" :class="tabAct === 1 ?'tab-act':''" @click="changeTab(1)">订单记录</view>
		</view>

		<view class="time-card-box" v-show="tabAct === 0">
			<view class="time-card" v-for="(item,index) in timeCardList" :key="index">
				<view class="time-card-item">时长卡名称：{{item.timeCardName}}</view>
				<view class="time-card-item flex-sb">
					<view>使用状态:</view>
					<view v-if="item.status ==='0'">未使用</view>
					<view class="unused" v-else>已使用</view>
				</view>
				<view class="time-card-item">有效期：{{item.expStartTime}} ~ {{item.expEndTime}}
				</view>
				<view class="time-card-item" v-if="item.createTime">获得时间：{{item.createTime}}</view>
				<view class="time-card-item" v-if="item.useTime">使用时间：{{item.useTime}}</view>
				<view class="delete-box" v-if="item.status ==='0'">
					<view class="delete-btn" @click="deleteCard(item,index)">删除</view>
				</view>
			</view>
			<view class="no-more">暂无更多</view>
		</view>
		<view class="time-card-box" v-show="tabAct === 1">
			<view class="time-card" v-for="(item,index) in orderList" :key="index">
				<view class="time-card-item">订单编号：{{item.orderNumber}}</view>
				<view class="time-card-item">房间类型：
					<text>{{dealProductType(item.orderDetail.productType)}}</text>
				</view>
				<view class="time-card-item">包间名称：{{item.orderDetail.productName}}</view>
				<view class="time-card-item">下单时间：{{item.createTime}}</view>
				<view class="time-card-item">预定时间：{{item.orderDetail.startTime}} ~ {{item.orderDetail.endTime}}</view>
				<view class="time-card-item">预定模式：
				    <text v-if="item.orderDetail.bookingType == 1">套餐</text>
				    <text v-if="item.orderDetail.bookingType == 2">小时</text>
				</view>
				<view class="time-card-item">支付方式：
					<text v-if="item.payType == 0">余额</text>
					<text v-if="item.payType == 1">微信</text>
					<text v-if="item.payType == 2">支付宝</text>
					<text v-if="item.payType == 3">时间卡</text>
					<text v-if="item.payType == 4">美团抖音兑换</text>
					<text v-if="item.payType == 5">代预定</text>
					<text v-if="item.payType == 41">美团兑换</text>
					<text v-if="item.payType == 42">抖音兑换</text>
				</view>
				<view class="time-card-item">支付金额：{{item.payAmount}}</view>
			</view>
			<view class="no-more">暂无更多</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				productionModel:[],
				userDetail: {},
				userId: '',
				shopId: '',
				timeCardList: [],
				tabAct: 0,
				orderList: []
			}
		},
		methods: {
			// 切换tab
			changeTab(val) {
				this.tabAct = val
				if (val === 0 && this.timeCardList.length === 0) {
					this.getTimeCardList()
				} else if (val === 1 && this.orderList.length === 0) {
					this.getOrderList()
				}
			},
			// 客户电话
			callNumber() {
				if (this.userDetail.mobile) {
					//  #ifdef  H5
					// 为了兼容不同浏览器，使用encodeURIComponent进行编码
					const encodedPhoneNumber = encodeURIComponent(this.userDetail.mobile);
					// 使用href设置电话链接
					window.location.href = `tel:${encodedPhoneNumber}`;
					//  #endif

					//  #ifdef MP-WEIXIN
					uni.makePhoneCall({
						phoneNumber: this.userDetail.mobile
					})
					//  #endif
				}
			},
			// 获取产品类型
			getProductionModel() {
				this.$request({
					method: 'get',
					url: `/applet/store/product/modelList`,
					loading: true,
					isEncrypt: false
				}).then(res => {
					this.productionModel = res.data || []
				}).catch(err => {
					console.log('查询异常：', err)
				})
			},
			// 处理产品类型
			dealProductType(productType) {
				let type = ''
				this.productionModel.forEach((item, index) => {
					if (item.modelType === productType) {
						type = item.modelName
					}
				})
				return type
			},
			// 获取用户详情信息
			getUserDetail() {
				this.$request({
					method: 'post',
					url: `/applet/store/user/${this.shopId}/${this.userId}`,
					loading: true,
					isEncrypt: false
				}).then(res => {
					this.userDetail = res.data || {}
				}).catch(err => {
					console.log('请求异常：', err)
				})
			},
			// 获取时长卡记录列表
			getTimeCardList() {
				const data = {
					userId: this.userId,
					shopId: this.shopId
				}
				this.$request({
					method: 'post',
					url: '/applet/store/timeCard/recordList',
					data,
					loading: true,
					isEncrypt: false
				}).then(res => {
					this.timeCardList = res.rows || []
				}).catch(err => {
					console.log('请求异常：', err)
				})
			},
			// 获取订单记录列表
			getOrderList() {
				const data = {
					userId: this.userId,
					shopId: this.shopId
				}
				this.$request({
					method: 'post',
					url: '/applet/store/order/list',
					data,
					loading: true,
					isEncrypt: false
				}).then(res => {
					this.orderList = res.rows || []
				}).catch(err => {
					console.log('请求异常：', err)
				})
			},
			// 删除时长卡记录
			deleteCard(item, index) {
				this.$request({
					method: 'post',
					url: `/applet/store/timeCard/deleteRecord/${item.recordId}`,
					loading: true,
					isEncrypt: false
				}).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '删除成功',
							duration: 2000,
							icon: 'none'
						})
						this.timeCardList.splice(index, 1)
					} else {
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log('请求异常：', err)
				})
			}
		},
		onLoad(option) {
			this.userId = option.userId
			this.shopId = option.shopId
			this.getProductionModel()
			this.getUserDetail()
			this.getTimeCardList()
		}
	}
</script>

<style lang="scss" scoped>
	.user-detail {
		padding: 20rpx;

		.tab-nav-box {
			display: flex;
			margin-bottom: 20px;
			margin-top: 20px;
		}

		.tab-nav-title {
			margin-right: 20px;
			color: #333;
			font-weight: bold;
			padding-bottom: 5px;
		}

		.tab-act {
			border-bottom: 2px solid #FF9600;
		}

		.title {
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.flex-box {
			display: flex;
			flex-wrap: wrap;

			.ml-box {
				margin-right: 15px;
			}
		}

		.flex-sb {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.card-box {
			background: #FFF;
			border: 1px solid #EEE;
			border-radius: 20rpx;
			padding: 20rpx;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
		}

		.user-img {
			flex: 0 0 100rpx;
			height: 100rpx;
			border-radius: 50%;
			flex-shrink: 0;
			margin-right: 20rpx;
		}

		.card-title {
			font-weight: bold;
			font-size: 30rpx;
			color: #FF9600;
		}

		.card-text {
			color: #333;
			font-size: 26rpx;
			margin-top: 20rpx;
		}

		.time-card-box {

			.time-card {
				background: #FFF;
				border: 1px solid #EEE;
				border-radius: 10rpx;
				padding: 20rpx;
				margin-bottom: 20rpx;
			}

			.time-card-item {
				margin-bottom: 10rpx;
			}
		}

		.delete-box {
			display: flex;
			justify-content: flex-end;

			.delete-btn {
				padding: 8rpx 36rpx;
				font-size: 24rpx;
				border-radius: 10rpx;
				color: #FFF;
				background: #ff9600;
			}
		}

		.unused {
			color: #ff9600;
		}

		.no-more {
			text-align: center;
			padding: 32rpx 0;
			color: #CCC;
			font-size: 28rpx;
		}
	}
</style>